<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      :width="1200"
      draggable
      :footer="false"
      @close="resetFields"
    >
      <template #title>
        {{ formData?.id ? '编辑居民' : '新增居民' }}
      </template>
      <a-form ref="formRef" layout="vertical" :model="formData">
        <a-space direction="vertical" :size="16">
          <a-card class="general-card">
            <template #title> 必填信息 </template>
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item
                  label="小区"
                  field="villageId"
                  validate-trigger="input"
                  required
                >
                  <a-select
                    v-model="formData.villageId"
                    placeholder="请选择"
                    allow-clear
                    @change="villageChange"
                  >
                    <a-option
                      :value="item.id"
                      v-for="item in wisdomCommunity"
                      :key="item.id"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                    label="楼栋"
                    field="buildingId"
                    validate-trigger="input"
                    required
                >
                  <a-select
                      v-model="formData.buildingId"
                      placeholder="请选择"
                      allow-clear
                      @change="buildingChange"
                  >
                    <a-option
                        :value="item.id"
                        v-for="item in buildingList"
                        :key="item.id"
                    >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="房户"
                    field="householdId"
                    validate-trigger="input"
                    required
                >
                  <a-select
                      v-model="formData.householdId"
                      placeholder="请选择"
                      allow-clear
                      @change="householdChange"
                  >
                    <a-option
                        :value="item.id"
                        v-for="item in householdList"
                        :key="item.id"
                    >{{ item.houseName }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="楼栋单元"
                    field="unit"
                    validate-trigger="input"
                    required
                >
                  <a-select
                      v-model="formData.unit"
                      placeholder="请选择"
                      allow-clear
                      @change="unitChange"
                  >
                    <a-option
                        :value="item.unitNo"
                        v-for="item in unitList"
                        :key="item.unitNo"
                    >{{ item.unitName }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="楼层"
                  field="floor"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.floor"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="门牌号"
                  field="houseNumber"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.houseNumber"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="审核状态"
                    field="checkStatus"
                    validate-trigger="input"
                    required
                >
                  <a-select
                      v-model="formData.checkStatus"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option
                        :value="item.value"
                        v-for="item in checkStatusArr"
                        :key="item.value"
                    >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="居民类型"
                    field="residentType"
                    validate-trigger="input"
                    required
                >
                  <a-select
                      v-model="formData.residentType"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option
                        :value="item.value"
                        v-for="item in residentTypeArr"
                        :key="item.value"
                    >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="入住时间"
                  field="checkInTime"
                  validate-trigger="input"
                  required
                >
                  <a-date-picker
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="formData.checkInTime"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="到期时间"
                  field="expirationTime"
                  validate-trigger="input"
                  required
                >
                  <a-date-picker
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="formData.expirationTime"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="人脸图片"
                  field="expirationTime"
                  validate-trigger="input"
                  required
                >
                  <a-upload
                    :action="apiHost+'/file/cfFile/upload'"
                    :file-list="faceImagesFile ? [faceImagesFile] : []"
                    :headers="header"
                    :data="uploadData"
                    :show-file-list="false"
                    @change="onFaceChange"
                    @progress="onFaceProgress"
                    @success="onFaceSuccess"
                  >
                    <template #upload-button>
                      <div
                        :class="`arco-upload-list-item${
                          faceImagesFile && faceImagesFile.status === 'error'
                            ? ' arco-upload-list-item-error'
                            : ''
                        }`"
                      >
                        <div
                          v-if="faceImagesFile && faceImagesFile.url"
                          class="arco-upload-list-picture custom-upload-avatar"
                        >
                          <img :src="faceImagesFile.url" />
                          <div class="arco-upload-list-picture-mask">
                            <IconEdit />
                          </div>
                          <a-progress
                            v-if="
                              faceImagesFile.status === 'uploading' &&
                              faceImagesFile.percent < 100
                            "
                            :percent="faceImagesFile.percent"
                            type="circle"
                            size="mini"
                            :style="{
                              position: 'absolute',
                              left: '50%',
                              top: '50%',
                              transform: 'translateX(-50%) translateY(-50%)',
                            }"
                          />
                        </div>
                        <div v-else class="arco-upload-picture-card">
                          <div class="arco-upload-picture-card-text">
                            <IconPlus />
                            <div style="margin-top: 10px; font-weight: 600"
                              >Upload</div
                            >
                          </div>
                        </div>
                      </div>
                    </template>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="手机号"
                  field="phone"
                  validate-trigger="input"
                >
                  <a-input
                    v-model="formData.phone"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="业主姓名"
                    field="userTrueName"
                    validate-trigger="input"
                >
                  <a-input
                      v-model="formData.userTrueName"
                      placeholder="请输入"
                      allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="性别"
                    field="sex"
                    validate-trigger="input"
                >
                  <a-select
                      v-model="formData.sex"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option
                        :value="item.value"
                        v-for="item in sexArr"
                        :key="item.value"
                    >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="证件号"
                    field="idNumber"
                    validate-trigger="input"
                >
                  <a-input
                      v-model="formData.idNumber"
                      placeholder="请输入"
                      allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
        <div class="actions">
          <a-space>
            <a-button @click="resetFields"> 重置 </a-button>
            <a-button type="primary" :loading="loading" @click="onSubmitClick">
              保存
            </a-button>
          </a-space>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    addResident, getBuildingHouseholdListByQuery, getBuildingListByQuery, getCfVillageUnitListByQuery,
    updateResident,
    wisdomCommunityGet,
  } from '@/api/wisdomCommunity';
  import { getToken } from '@/utils/auth';
  import { Message } from '@arco-design/web-vue';
  // @ts-ignore
  import { parseTime } from '@/utils/index';
  import { cloneDeep } from 'lodash';
  import dayjs from 'dayjs';
  const apiHost = import.meta.env.VITE_API_BASE_URL;

  const visible = ref(false);
  const loading = ref(false);
  const formRef = ref();
  const emit = defineEmits(['fetchData', 'fetch-data']);
  const formData = ref({
    checkInTime: '',
    checkStatus: '',
    expirationTime: '',
    phone: '',
    residentType: '',
    villageId: '',
    buildingId: '',
    unit: '',
    floor: '',
    houseNumber: '',
    faceImage: '',
    id: '',
    householdId: '',
    sex: '',
    idNumber: '',
    userTrueName: '',
  });

  // 上传相关
  const uploadData: any = ref({
    fileType: 1,
    scene: 'user_avatar',
  });
  const header: any = ref({
    Authorization: getToken(),
  });
  const faceImagesFile = ref({
    url: '',
  });

  const wisdomCommunity = ref([]);
  const buildingList = ref([]);
  const householdList = ref([]);
  const unitList = ref([]);
  const residentTypeArr = [
    { value: 1, label: '业主' },
    { value: 2, label: '个人租户' },
    { value: 3, label: '办公' },
  ];
  const checkStatusArr = [
    { value: 1, label: '待审核' },
    { value: 2, label: '正常' },
    { value: 3, label: '审核不通过' },
  ];
  const sexArr = [
    { value: 0, label: '未知' },
    { value: 1, label: '男' },
    { value: 2, label: '女' },
  ];
  const handleClick = (e: any = null) => {
    getWisdomCommunityList();
    getBuildingHouseholdList(0);
    let villageId = 0;
    if (e?.id) {
      const newInfo = JSON.parse(JSON.stringify(e));
      villageId = newInfo.villageId;
      faceImagesFile.value.url = newInfo.faceImageUrl;
      newInfo.checkInTime = parseTime(e.checkInTime);
      // @ts-ignore
      newInfo.expirationTime = parseTime(e.expirationTime);
      formData.value = newInfo;
    }
    getBuildingList(villageId);
    visible.value = true;
  };
  const resetFields = () => {
    formData.value.id = '';
    formRef.value.resetFields();
  };
  const rawCitiesDataChange = (e: any) => {
    console.log(e);
  };
  const getWisdomCommunityList = async () => {
    // @ts-ignore
    const { data, code } = await wisdomCommunityGet({
      params: {
        page: 1,
        size: 20,
      },
    });
    if (code === 10002) {
      wisdomCommunity.value = data;
    } else {
      wisdomCommunity.value = [];
    }
  };
  const villageChange = async () => {
    getBuildingList(formRef.value.villageId);
  };

  const buildingChange = async () => {
    // @ts-ignore
    const { data, code } = await getCfVillageUnitListByQuery({
      params: {
        page: 1,
        size: 100,
        buildingId: formData.value.buildingId,
      },
    });
    if (code === 10002) {
      unitList.value = data;
    } else {
      unitList.value = [];
    }
    getBuildingHouseholdList(formData.value.buildingId);
  };

  const getBuildingList = async (_villageId: any) => {
    // @ts-ignore
    let params = {
      page: 1,
      size: 100,
      villageId: _villageId,
    };
    if(!params.villageId) {
      delete params.villageId;
    }
    const { data, code } = await getBuildingListByQuery({
      params: params
    });
    if (code === 10002) {
      buildingList.value = data;
    } else {
      buildingList.value = [];
    }
  };

  const getBuildingHouseholdList = async (_buildingId: any) => {
    // @ts-ignore
    let params = {
      page: 1,
      size: 100,
      buildingId: _buildingId
    };
    if(!params.buildingId) {
      delete params.buildingId;
    }
    const { data, code } = await getBuildingHouseholdListByQuery({
      params: params
    });
    if (code === 10002) {
      householdList.value = data;
    } else {
      householdList.value = [];
    }
  };

  const householdChange = async (e: any) => {
    if(formData.value.householdId) {
      for(let i=0; i<householdList.value.length; i++) {
        if(householdList.value[i].id === formData.value.householdId) {
          formData.value.floor = householdList.value[i].floor;
          formData.value.houseNumber = householdList.value[i].houseNumber;
          formData.value.unit = householdList.value[i].unit;
        }
      }
    }
  };

  const unitChange = async (e: any) => {

  };

  const onFaceChange = (_: any, currentFile: any) => {
    faceImagesFile.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };
  const onFaceProgress = (currentFile: any) => {
    faceImagesFile.value = currentFile;
  };
  const onFaceSuccess = (fileRes: any) => {
    formData.value.faceImage = fileRes.response.data.id;
  };

  const onSubmitClick = () => {
    // eslint-disable-next-line consistent-return
    formRef.value.validate(async (valid: any) => {
      if (valid) return false;
      const newForm = cloneDeep(formData.value);
      // @ts-ignore
      newForm.checkInTime = dayjs(formData.value.checkInTime).valueOf();
      // @ts-ignore
      newForm.expirationTime = dayjs(formData.value.expirationTime).valueOf();
      // @ts-ignore
      if (formData.value.id) {
        const { code } = await updateResident(newForm);
        if (code === 10002) {
          formRef.value.resetFields();
          visible.value = false;
          Message.success('更新成功!');
          emit('fetchData');
        }
      } else {
        const { code } = await addResident(newForm);
        if (code === 10002) {
          formRef.value.resetFields();
          visible.value = false;
          Message.success('添加成功!');
          emit('fetchData');
        }
      }
    });
  };

  defineExpose({ handleClick });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }

  .actions {
    height: 60px;
    padding: 14px 20px 14px 0;
    background: var(--color-bg-2);
    text-align: right;
  }
</style>
